<template>
  <div class="hot">
    <ul v-for="group in data.hot">
      <span class="hot-type">{{ group.name }}</span>
      <div class="hot-item">
        <li v-for="item in group.data">
          <div
            :title="item.name"
            :data-original="item.img"
            :style="{
              backgroundImage: 'url(' + item.img + ')',
              backgroundSize: 'contain',
              width: '180px',
              height: '250px',
            }"
            class="hot-img"
            @click="forwordDeail(item.name)">
            <div class="play"></div>
          </div>
          <el-tooltip class="box-item" effect="light" :content="item.name" placement="bottom-start">
            <div class="hot-item-name" @click="forwordDeail(item.name)">
              {{ item.name }}
            </div>
          </el-tooltip>
        </li>
      </div>
    </ul>
  </div>
</template>

<script setup>
  import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
  import { useStore } from 'vuex';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  let { proxy } = getCurrentInstance();
  const data = reactive({ hot: [] });

  const forwordDeail = videoName => {
    router.addRoute('home', {
      path: '/video/videoDetail',
      mate: { title: '明细' },
      name: videoName,
      params: { id: '2333' },
      component: () => import('@/views/video/VideoDetail.vue'),
    });
    router.push({ path: '/video/videoDetail' });
  };
  onMounted(() => {
    //初始化热点加载
    loadHots();
  });
  //热点加载
  const loadHots = async () => {
    data.hot = await proxy.$api.video.queryVideoHots({ ruleId: '123' });
  };
  data.hot = [
    {
      name: '最新日本动漫',
      data: [
        {
          name: '冰属性男子与酷酷女同事酷酷女同事',
          img: 'https://pic1.zykpic.com/upload/vod/2023-08-09/202308091691569174.jpg',
          url: 'http://www.dm88.me/view/10149.html',
        },
        {
          name: '冰属性男子与酷酷女同事酷酷女同事',
          img: 'http://puui.qpic.cn/vcover_vt_pic/0/7q544xyrava3vxf1583199765944/0',
          url: 'http://www.dm88.me/view/10149.html',
        },
      ],
    },
    {
      name: '最新国产动漫',
      data: [
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://sakura.xonlines.com/upload/vod/20230117-1/f651442adc9db74d02d1242b0d1f4be6.jpg',
          url: 'http://www.dm88.me/view/10149.html',
        },
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://sakura.xonlines.com/upload/vod/20230117-1/f651442adc9db74d02d1242b0d1f4be6.jpg',
          url: 'http://www.dm88.me/view/10149.html',
        },
      ],
    },
    {
      name: '最新美国动漫',
      data: [
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://sakura.xonlines.com/upload/vod/20230117-1/08e06f2ce6d88ee1c34ed436797ebc28.jpg',
          url: 'http://www.dm88.me/view/10149.html',
        },
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://sakura.xonlines.com/upload/vod/20230117-1/08e06f2ce6d88ee1c34ed436797ebc28.jpg',
          url: 'http://www.dm88.me/view/10149.html',
        },
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://sakura.xonlines.com/upload/vod/20230117-1/f651442adc9db74d02d1242b0d1f4be6.jpg',
          url: 'http://www.dm88.me/view/10149.html',
        },
        {
          name: '冰属性男子与酷酷女同事',
          img: 'https://sakura.xonlines.com/upload/vod/20230117-1/f651442adc9db74d02d1242b0d1f4be6.jpg',
          url: 'http://www.dm88.me/view/10149.html',
        },
      ],
    },
  ];
</script>

<style lang="scss" scoped>
  .hot {
    width: 80%;
    .hot-type {
      font-size: 18px;
      font-weight: bold;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: inline-block;
      padding: 15px 0;
      width: 100%;
      li {
        float: left;
        margin: 10px;
        width: 180px;
      }
    }
    .hot-item {
      .hot-img {
        cursor: pointer;
      }
      .play {
        //background: url('@/assets/img/play.png') no-repeat;
        background-position: center center;
        width: 180px;
        height: 250px;
      }
      .hot-img:hover {
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.8;
        .play {
          background: url('@/assets/img/play.png') no-repeat;
          background-position: center center;
        }
      }
      .hot-item-name {
        padding-top: 5px;
        font-size: 15px;
        // font-weight: bolder;
        cursor: pointer;
        width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hot-item-name:hover {
        color: rgb(214, 13, 13);
        // background: #ccc;
      }
    }
  }
</style>
